<template>
  <a-modal :width="1000" title="价格日历" @cancel="close" :visible="visible" unmount-on-close>
    <!-- 车型名称 -->
    <div class="car-model-name">{{ modelName || '-' }}</div>
    <el-config-provider :locale="zhCn">
      <el-calendar class="custom-calendar" ref="calendarRef" v-model="selDateVal">
        <template #header="{ date }">
          <span class="current-month-show">{{ date.replace(/\s*/g, '') }}</span>
          <div class="month-operater">
            <a-space :size="8">
              <a-button type="primary" :disabled="setMonthDisabled('prev-month', date)" @click="selectDate('prev-month')">上一月</a-button>
              <a-button type="primary" :disabled="setMonthDisabled('next-month', date)" @click="selectDate('next-month')">下一月</a-button>
            </a-space>
          </div>
        </template>
        <template #date-cell="{ data }">
          <div class="calendar-day">
            {{ data.day.split('-').slice(2).join('') }}
          </div>
          <div class="price-type">{{ getPriceContent(data.day).calendarTypeStr }}</div>
          <div class="price-value">{{ getPriceContent(data.day).price }}</div>
        </template>
      </el-calendar>
    </el-config-provider>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup name="PriceCalendarModal">
  import { ref } from 'vue'
  import { ElCalendar, ElConfigProvider } from 'element-plus'
  import dayjs from 'dayjs'
  import 'element-plus/es/components/calendar/style/css'
  import 'dayjs/locale/zh-cn'
  import zhCn from './zh-cn.js'
  const visible = ref(false)
  const modelName = ref()
  const priceList = ref([])
  const open = (carModelName) => {
    modelName.value = carModelName
    visible.value = true
  }
  const getPriceContent = (day) => {
    let findResult = priceList.value.find((item) => item.calendarDateStr == day)
    return findResult || {}
  }
  const close = () => {
    visible.value = false
  }
  const calendarRef = ref()
  const selectDate = (val) => {
    if (!calendarRef.value) return
    calendarRef.value.selectDate(val)
  }
  // 当前选中的日期，用于指定月份
  const selDateVal = ref(new Date())
  // 当前月份
  const nowYear = ref(new Date().getFullYear())
  const nowMonth = ref(new Date().getMonth())
  // 处理 上下月是否可点击
  const setMonthDisabled = (type, date) => {
    const calendarYear = dayjs(date, 'YYYY 年 M 月', 'zh-cn').year()
    const calendarMonth = dayjs(date, 'YYYY 年 M 月', 'zh-cn').month()
    let _nowMonth = nowMonth.value
    let _calendarMonth = calendarYear > nowYear.value ? 12 + calendarMonth : calendarMonth
    // 仅展示 本月、下一月、下下月
    if (type == 'prev-month') {
      return _calendarMonth == _nowMonth
    } else {
      return _calendarMonth == _nowMonth + 2
    }
  }
  const setPriceList = (list) => {
    selDateVal.value = new Date(list[0].calendarDate)
    nowMonth.value = selDateVal.value.getMonth()
    nowYear.value = selDateVal.value.getFullYear()
    priceList.value = list
  }
  defineExpose({
    open,
    setPriceList,
  })
</script>

<style lang="less" scoped>
  .car-model-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
  }
  .current-month-show {
    font-size: 18px;
    color: var(--color-text-1);
  }
  .custom-calendar {
    --el-text-color-regular: #000000d9;
    --el-calendar-border: 1px solid #e5eaee;
    :deep(.el-calendar__header) {
      border-bottom: none;
      padding: 12px 0 17px;
    }
    :deep(.el-calendar__body) {
      padding: 0;
      thead th {
        padding-right: 16px;
        text-align: right;
        border-right: var(--el-calendar-border);
      }
      thead th:last-child {
        border-right: none;
      }
      td {
        border-top: var(--el-calendar-border);
        border-bottom: none;
        user-select: none;
        .calendar-day {
          color: #000000d9;
          text-align: right;
        }
        .price-type {
          color: #000000a6;
          line-height: 1;
        }
        .price-value {
          color: #000000d9;
          line-height: 1;
          margin-top: 6px;
        }
      }
      td:first-child {
        border-left: none;
      }
      td:last-child {
        border-right: none;
      }
      td.is-selected {
        background-color: unset;
        .calendar-day {
          color: unset;
        }
      }
      td.is-today {
        background-color: #ecf4feff;
        border-top: 1px solid #1890ff;
        .calendar-day {
          color: #1890ffff;
        }
      }
      td.next,
      td.prev {
        .calendar-day {
          color: #00000040;
        }
      }
      .el-calendar-day {
        padding: 16px;
        height: 90px;
      }
      .el-calendar-day:hover {
        cursor: pointer;
        background-color: unset;
      }
      .el-calendar-table__row:last-child td {
        border-bottom: var(--el-calendar-border);
      }
    }
  }
</style>
